<template>
  <div class="Ediandian-card">
    <div class="userAction">
      <div class="action-top-wrap" @click="toDetail">
        <div class="actionTop">
          <div class="user">
            <div class="avatar">
              <van-image
                class="avatar-image"
                round
                :src="action.author.avatar"
                fit="cover"
              />
            </div>
            <div class="username-wrap">
              <span class="van-ellipsis username">{{
                action.author.username
              }}</span>
              <span class="time">{{ action.actTime }}</span>
            </div>
          </div>
        </div>

        <div class="action-content van-multi-ellipsis--l3">
          {{ action.content }}
        </div>
      </div>

      <div class="action-image">
        <van-grid :column-num="3">
          <van-grid-item
            v-for="(image, index) in action.images"
            :key="index"
            @click="preview($event, index)"
          >
            <van-image :src="image" />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="thumb-wrap">
        <div class="thumb-icon">
          <i
            :class="{ 'Ediandian-icon': isThumb }"
            class="iconfont icon-thumbup"
            @click="thumbup"
          ></i>
          <span class="thumb-count">{{ action.grantCount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { thumbUp, cancleThumbUp } from "@/api/community";
import { mapState } from "vuex";
import bus from "@/utils/global-bus";
export default {
  name: "ActionItem",
  props: {
    actionItem: {
      type: Object,
    },
    thumbs: {
      type: Array,
    },
  },
  data() {
    return {
      action: this.actionItem,
      thumbList: this.thumbs,
      show: false,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },

  computed: {
    isThumb() {
      return this.thumbList.find((val) => val === this.action.id) === undefined
        ? false
        : true;
    },
    ...mapState("user", ["user"]),
  },

  watch: {
    //监听父组件传来的数组
    thumbs(newVal, oldVal) {
      this.thumbList = [...newVal];
    },
    actionItem(newVal, oldVal) {
      this.action = {...newVal};
    },
  },

  mounted() {
    console.log("加载");
    bus.$on("updateAction", ({ grantCount, isThumb,id }) => {
      this.$nextTick(() => {
        if(this.action.id != id){ 
            return ;
        }
        this.action.grantCount = grantCount;
        //如果已点赞，判断当前点赞状态
        if (isThumb == 1) {
          if (this.isThumb == false) {
            this.thumbList.push(this.action.id);
          }
        } else {
          if (this.isThumb) {
            this.thumbList = this.thumbList.filter(
              (val) => val != this.action.id
            );
          }
        }
      });
    });
  },

  methods: {
    /**
     * 跳转详情页
     */
    toDetail() {
      console.log("跳转详情页");
      this.$router.push({
        name: "detail",
        params: {
          userId: this.user.id,
          actionId: this.action.id,
        },
      });
    },

    /**
     * 点赞
     */
    thumbup() {
      /**
       * 首先判断当前点赞状态，已点赞的再点就是取消点赞操作
       * 未点赞的点击才是点赞操作
       */
      //取消点赞
      if (this.isThumb) {
        this.cancleThumbup();
      } else {
        let time = "";
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let minutes = date.getMinutes();
        let second = date.getSeconds();

        time =
          time +
          year +
          "-" +
          month +
          "-" +
          day +
          " " +
          hour +
          ":" +
          minutes +
          ":" +
          second;
        let data = {
          thumber: this.user.id,
          thumbAction: this.action.id,
          time: time,
        };

        thumbUp(data).then((res) => {
          this.thumbList.push(this.action.id);
          this.action.grantCount++;
          /**
           * 向后端发送点赞消息
           */
          this.websocket.Send("点赞",this.user.username,this.action.author.username,"动态点赞成功")
        });
      }
    },

    /**
     * 取消点赞操作
     */
    cancleThumbup() {
      let data = {
        thumber: this.user.id,
        thumbAction: this.action.id,
      };
      cancleThumbUp(data).then((res) => {
        this.thumbList = this.thumbList.filter((val) => val != this.action.id);
        this.action.grantCount--;
      });
    },

    preview(event, index) {
      ImagePreview({
        images: this.action.images,
        startPosition: index,
      });
    },
  },
};
</script>

<style scoped>
.Ediandian-card {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 10px;
}

.userAction {
  width: 350px;
  margin: 0px auto;
  padding-top: 10px;
}

.actionTop {
  height: 45px;
  display: flex;
  justify-content: space-between;
}

.user {
  height: 45px;
  display: flex;
  flex-direction: row;
}

.avatar {
  width: 50px;
}

.avatar-image {
  width: 45px;
  height: 45px;
}

.username {
  font-size: 18px;
  display: block;
  height: 24px;
}

.time {
  font-size: 12px;
  display: block;
  height: 21px;
  line-height: 21px;
}

.action-content {
  padding-top: 5px;
  font-size: 15px;
}

.thumb-wrap {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.thumb-count {
  font-size: 12px;
}

.Ediandian-icon {
  color: red;
}
</style>